<template>
  <div class="hello">
    <p class="tips">{{$t("recycle_tips")}}</p>
    <!-- 页面列表 -->
     <el-table align="left"
          v-if="lists.length>0"
          :data="lists"
          style="width: 100%">
          <el-table-column
            prop="page_title"
            :label="$t('page_title')"
            >
          </el-table-column>
          <el-table-column
            prop="del_by_username"
            :label="$t('deleter')"
            >
          </el-table-column>
          <el-table-column
            prop="del_time"
            :label="$t('del_time')"
            >
          </el-table-column>
          <el-table-column
            prop=""
            :label="$t('operation')">
            <template slot-scope="scope">
              <el-button @click="recover(scope.row.page_id)" type="text" size="small">{{$t("recover")}}</el-button>
            </template>
          </el-table-column>
        </el-table>




  </div>
</template>

<script>


export default {
  name: 'Login',
  components : {

  },
  data () {
    return {
      MyForm:{
        username:'',
        is_readonly:false
      },
      MyForm2:{
        team_id:'',
      },
      lists:[],
    }

  },
  methods: {

      get_list(){
        var that = this ;
        var url = DocConfig.server+'/api/recycle/getList';
        var params = new URLSearchParams();
        params.append('item_id',  that.$route.params.item_id);
        that.axios.post(url, params)
          .then(function (response) {
            if (response.data.error_code === 0 ) {
              var Info = response.data.data
              that.lists =  Info;
            }else{
              that.$alert(response.data.error_message);
            }
            
          });
      },
      recover(page_id){
          var that = this ;
          var url = DocConfig.server+'/api/recycle/recover';

          this.$confirm(this.$t("recover_tips"), ' ', {
            confirmButtonText: that.$t('confirm'),
            cancelButtonText: that.$t('cancel'),
            type: 'warning'
          }).then(() => {
            var params = new URLSearchParams();
            params.append('item_id',  that.$route.params.item_id);
            params.append('page_id', page_id);

            that.axios.post(url, params)
            .then(function (response) {
              if (response.data.error_code === 0 ) {
                that.get_list() ;
              }else{
                that.$alert(response.data.error_message);
              }
            }); 
          })
      }

  },

  mounted(){
    this.get_list();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.hello{
  text-align: left;
}
.tips{
  margin-left: 10px;
  color: #9ea1a6;

}

</style>
